<template>
  <div class="EmergencyDetail">
    <div class="flex location-wrap">
        <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/Failurerepair' }">客户服务</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="EmergencyDetail-center">
      <TimeLine :activities="activities" :title="'应急事件流程'" />
      <div class="EmergencyDetail-add">
        <div class="EmergencyDetail-titel">
          <div class="EmergencyDetail-top">客户抢修工单详情</div>
          <div class="InformationDetail-btn">
            <el-row>
              <el-button size="mini" @click="back" class="back-btn">返回</el-button>
            </el-row>
          </div>
        </div>
        <div class="EmergencyDetail-zt">
          <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
            <el-descriptions slot="slot1"
              :labelStyle="{ width: '130px', display: 'flex', 'justify-content': 'flex-end' }">
              <el-descriptions-item label="响应命令单">
                <router-link tag="p" style="color: #3561FD; text-decoration: underline; cursor: pointer;"
                  :to="`/EmergencyResponseinfo?id=${form.sourceInfoId}`">
                  {{ form.sourceInfo }}
                </router-link>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions slot="slot2"
              :labelStyle="{ width: '130px', display: 'flex', 'justify-content': 'flex-end' }">
              <el-descriptions-item label="工单名称">
                {{ form.orderName }}
              </el-descriptions-item>
              <el-descriptions-item label="故障地址">
                {{ form.breakdownAddress }}
              </el-descriptions-item>
              <el-descriptions-item label="用户类型">
                {{ form.userType }}
              </el-descriptions-item>
              <el-descriptions-item label="派发单位/部门">
                {{ form.creatorUnit }}
              </el-descriptions-item>
              <el-descriptions-item label="派发人">
                {{ form.creator }}
              </el-descriptions-item>
              <el-descriptions-item label="任务发布时间">
                {{ form.createTime }}
              </el-descriptions-item>
              <el-descriptions-item label="责任单位/部门">
                {{ form.dutyUnit }}
              </el-descriptions-item>
              <el-descriptions-item label="责任人">
                {{ form.dutyOfficer }}
              </el-descriptions-item>
              <el-descriptions-item label="要求完成时间">
                {{ form.planFinishTime }}
              </el-descriptions-item>
              <el-descriptions-item label="任务内容">
                {{ form.orderContent }}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions slot="slot3"
              :labelStyle="{ width: '130px', display: 'flex', 'justify-content': 'flex-end' }">
              <el-descriptions-item label="受理时间">
                {{ form.executionFeedbackDetailVo.acceptanceTime }}
              </el-descriptions-item>
              <el-descriptions-item label="复电状态">
                <span v-if="form.executionFeedbackDetailVo.powerRecoveryStatus == 0">未复电</span>
                <span v-else-if="form.executionFeedbackDetailVo.powerRecoveryStatus == 1">已复电</span>
              </el-descriptions-item>
              <el-descriptions-item label="复电方式">
                {{ form.executionFeedbackDetailVo.powerRecoveryPattern }}
              </el-descriptions-item>
              <el-descriptions-item label="用户类型">
                {{ form.executionFeedbackDetailVo.userType }}
              </el-descriptions-item>
              <el-descriptions-item label="所属台区">
                {{ form.executionFeedbackDetailVo.attributionArea }}
              </el-descriptions-item>
              <el-descriptions-item label="所属线路">
                {{ form.executionFeedbackDetailVo.attributionLine }}
              </el-descriptions-item>
              <el-descriptions-item label="电压等级" :span="3">
                {{ form.executionFeedbackDetailVo.voltageGrade }}
              </el-descriptions-item>
              <el-descriptions-item label="执行情况" :span="3">
                {{ form.executionFeedbackDetailVo.performanceCircs }}
              </el-descriptions-item>
              <el-descriptions-item label="现场照片">
                <div>
                  <img :src="img" alt="" v-for="(img, i) in sceneImage" :key="i" class="sceneImage" v-show="img">
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </LsdDialogTitle>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeLine from "@/components/component/timeLine.vue";
import {
  getinfo
} from "@/api/EmergencyDisposal/khfw";
import {
  getLeftFlowApi
} from "@/api/EmergencyDisposal/xymld";
import { loadFile } from "@/api/common.js";
export default {
  name: "EmergencyResponseinfo",
  components: { TimeLine },
  data() {
    return {
      activeNames: ["1", "2", "3"],
      // 折叠面板信息
      titleConfig: [
        {
          title: "信息来源",
          name: "1",
          slot: "slot1"
        },
        {
          title: "任务详情",
          name: "2",
          slot: "slot2"
        },
        {
          title: "执行反馈",
          name: "3",
          slot: "slot3"
        }
      ],
      activities: [
      ],
      form: {
        executionFeedbackDetailVo: {}
      },
      sceneImage: [], // 现场图片
      img: ""
    };
  },
  mounted() {
    this.getinfo();
  },
  methods: {
    async getinfo() {
      const res = await getinfo({ id: this.$route.query.id });
      this.form = res;
      this.form.executionFeedbackDetailVo = res.executionFeedbackDetailVo || {};
      this.getLeftFlow(res.emergencyId);
      const { attachInfo } = res;
      if (attachInfo && attachInfo.length) {
        this.sceneImage = await Promise.all(attachInfo.map(async img => {
          try {
            return await this.getImgFile(img.attachId);
          } catch (error) {
            return "";
          }
        }));
      } else {
        this.sceneImage = [];
      }
    },
    back() {
      this.$router.back();
    },
    async getLeftFlow(emergencyId) {
      try {
        const res = await getLeftFlowApi({ emergencyId });
        this.activities = res;
      } catch (error) {
        console.log(error);
      }
    },
    // 获取图片地址
    getImgFile(id) {
      return new Promise((reslove, reject) => {
        loadFile({ id }).then(res => {
          const url = URL.createObjectURL(res);
          this.sceneImage.push(url);
          // this.img = url;
        }).catch(err => {
          reject(err);
        });
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../../assets/style/common.less";
@import "../../../../assets/style/ComponentStyle.less";
@import "../../../../assets/style/pop-upNotification.less";
.back-btn {
  padding: 8px 18px;
}

:deep(.el-descriptions) {
  font-size: 16px;
}

:deep(.el-collapse-item__content) {
  font-size: 16px;
}

:deep(.el-descriptions :not(.is-bordered) .el-descriptions-item__cell) {
  padding-bottom: 20px;
}

.EmergencyDetail {
  width: 100%;
  height: 100%;

  :deep(.el-timeline) {
    width: 85%;
    margin-left: 35px;
    margin-top: 30px;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  .EmergencyDetail-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .EmergencyDetail-add {
      width: 83%;
      height: 100%;
      background-color: #fff;
      border-radius: 5px;

      // padding: 0 10px;
      .EmergencyDetail-titel {
        width: 98%;
        margin: 0 auto;
        position: relative;
        padding: 20px 0;
        border-bottom: solid 1px #ccc;

        .EmergencyDetail-top {
          text-align: center;
          font-family: 微软雅黑;
          font-weight: 400;
          font-style: normal;
          font-size: 28px !important;
        }

        .InformationDetail-btn {
          position: absolute;
          right: 5px;
          bottom: 5px;
          text-align: right;
        }
      }

      .EmergencyDetail-zt {
        width: 98%;
        height: 78%;
        overflow-y: auto;
        margin: 0 auto;
      }
    }
  }

}

.sceneImage {
  width: 216px;
  height: 239px;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-right: 10px;

  // &+.sceneImage {
  //   margin-left: 10px;
  // }
}
</style>
